<template>
  <div class="reportPush">
    <el-card>
      <el-form ref="form" :model="form" class="searchLine" label-width="120px">
        <el-form-item label="单位名称" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" size="small" placeholder="请选择单位"class="searchItemWidth">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站名称" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" size="small" placeholder="请选择单位"class="searchItemWidth">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务编号" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" size="small" placeholder="请选择单位" class="searchItemWidth">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务开始时间" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-date-picker
            v-model="form.startTime1"
            size="small"
            type="datetimerange"
            class="searchItemWidth"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="诊断任务编号" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-select v-model="form.deptId" placeholder="请选择单位" size="small" class="searchItemWidth">
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="诊断开始时间" class="searchItem">
          <!-- <SelectTree ref="orgTree" v-model="form.deptId" width="230px; display: inline-block;" :options="tree" :props="defaultProps" /> -->
          <el-date-picker
            v-model="form.startTime"
            size="small"
            type="datetimerange"
            class="searchItemWidth"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-row>
          <el-form-item label="诊断模型" class="searchItem bigItem">
            <el-checkbox :indeterminate="isIndeterminate" size="small" v-model="checkAll" @change="handleCheckAllChange" style="display: inline-block; margin-right:10px; vertical-align:top;">全选</el-checkbox>
            <el-checkbox-group v-model="form.title" style="display: inline-block;" size="small" @change="handleChange">
              <el-checkbox :label="2">光伏热斑识别模型</el-checkbox>
              <el-checkbox :label="3">光伏组件脱落识别模型</el-checkbox>
              <el-checkbox :label="4">光伏围栏倾侧识别模型</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-button style="float:right; margin-left:10px;" size="small">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="listSearch" size="small" style="float:right;">查询</el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-row style="background:#fff; margin-top:10px; padding:10px; border-radius:10px;">
      <el-table
       :data="tableData"
       tooltip-effect="dark"
       size="small"
       @selection-change="handleSelectionChange"
       max-height="500"
       style="width: 100%">
       <el-table-column
        type="selection"
        width="55">
      </el-table-column>
       <el-table-column
         label="序号"
         type="index"
         width="60"
         >
       </el-table-column>
       <el-table-column
         label="推送时间"
         >
         <template slot-scope="scope">
           <span>
           </span>
         </template>
       </el-table-column>
       <el-table-column
         prop="stationName"
         label="推送平台">
       </el-table-column>
       <el-table-column
         prop="stationAddress"
         label="任务编号">
       </el-table-column>
       <el-table-column
         prop="stationAdminName"
         label="任务启动时间">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="单位名称">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="场站名称">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="诊断模型">
       </el-table-column>

       <el-table-column
         prop="stationAdminPhone"
         label="图片数量">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="异常图片数量">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="报告">
       </el-table-column>
       <el-table-column
         prop="stationAdminPhone"
         label="推送状态">
       </el-table-column>
      </el-table>
    </el-row>
    <el-row class='pagination'>
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "reportPush",
    data () {
      return {
        form: {
          title: []
        },
        tree: [],
        checkAll: '',
        isIndeterminate: true,
        selection: [],
        pageSize: 10,
        currentPage: 1,
        total: 0,
        tableData: []
      }
    },
    methods: {
      handleCheckAllChange(val) {
        this.form.title = val ? [2, 3, 4] : []
        this.isIndeterminate = false
      },
      handleChange(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === 3
        this.isIndeterminate = checkedCount > 0 && checkedCount < 3
      },
      listSearch() {},
      deleteStation() {},
      handleSelectionChange(selection) {
        this.selection = selection
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.currentPage = currentPage
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reportPush{
    padding: 10px 20px;
    .searchLine{
      .searchItem{
        display: inline-block;
        vertical-align: top;
      }
      .el-form-item{
        margin-bottom: 3px !important;
      }
      .bigItem{
        width: 100%;
      }
    }
    .pagination{
      text-align: center;
      margin-top: 20px;
    }
  }
</style>
